<template>
	<view>
		<view class="navBar">
			<view class="left">
				<uni-icons type="left" size="24" @click="toBack"></uni-icons>
			</view>
			<view class="center">商品详细</view>
			<view class="right"></view>
		</view>
		<view class="">
			<image class="goodsImg" :src="detail.image" mode="widthFix" @click="previewImage(detail.image)"></image>
			<view class="goodsDetail">
				<view class="price">
					<text class="yuan">￥</text>
					<text>{{Number(detail.price).toFixed(2).split('.')[0]}}.</text>
					<text class="decimal">{{Number(detail.price).toFixed(2).split('.')[1]}}</text>
				</view>
				<view class="name-spec-desc">
					<view class="goodsName">
						{{detail.goodsName}}
					</view>
					<view class="">商品规格：</view>
					<view class="specifications">
						{{detail.specifications}}
					</view>
					<view class="label-numsBox">
						<view class="label">商品数量：</view>
						<view class="numsBox">
							<view class="btn" @click="sub">-</view>
							<view class="num" @click="numsInput">{{quantity}}</view>
							<view class="btn" @click="plus">+</view>
						</view>
					</view>

					<view class="">商品简介：</view>
					<view class="description">
						{{detail.description}}
					</view>
				</view>
			</view>
		</view>
		<uni-goods-nav class="goods-nav" :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
			@buttonClick="buttonClick" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail: {},
				goodsId: '',
				quantity: 1,
				token: '',
				result: '',
				options: [{
						icon: 'headphones',
						text: '客服'
					}, {
						icon: 'shop',
						text: '店铺',
						// info: 2,
						infoBackgroundColor: '#007aff',
						infoColor: "red"
					},
					{
						icon: 'cart',
						text: '购物车',
						info: 0
					}
				],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#14abf6',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#0f8cc6',
						color: '#fff'
					}
				],

			}
		},
		onLoad(option) {
			this.token = uni.getStorageSync("token");
			this.getId(option);
			this.getGoodsDetail();
			this.getCartCount();
		},
		methods: {
			getId(option) {
				this.goodsId = option.id;
				console.log(this.id);
			},
			toBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			previewImage(url) {
				uni.previewImage({
					urls: [url],
				})
			},
			getGoodsDetail() {
				uni.request({
					url: 'http://localhost:8080/goods/findById',
					method: 'GET',
					data: {
						gid: this.goodsId,
					},
					success: res => {
						console.log(res.data);
						this.detail = res.data
					},
					fail: () => {},
					complete: () => {}
				});
			},
			getCartCount() {
				uni.request({
					url: 'http://localhost:8080/cart/findCartCountById',
					method: 'GET',
					data: {
						token: this.token,
					},
					success: res => {
						this.options[2].info = res.data;
					},
					fail: () => {},
					complete: () => {}
				});
			},
			onClick(e) {
				if (e.content.icon == 'cart') {
					uni.reLaunch({
						url: '/pages/cart/cart',
					});
				}
			},
			buttonClick(e) {
				if (e.index == 0) {
					this.addCart();
				} else if (e.index == 1) {
					this.addOrder();
				}
			},
			addCart(e) {
				if (uni.getStorageSync("token")) {
					uni.request({
						url: 'http://localhost:8080/cart/addCart',
						method: 'POST',
						header: {
							'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
						},
						data: {
							goodsId: this.goodsId,
							quantity: this.quantity,
							token: this.token,
						},
						success: res => {
							if (res.data == "库存不足") {
								uni.showToast({
									icon: "error",
									title: res.data,
								})
							} else if (res.data == "成功添加购物车") {
								uni.showToast({
									icon: "success",
									title: res.data,
								})
							} else if (res.data == "用户未登录") {
								uni.showToast({
									icon: "error",
									title: res.data,
								})
							}

							this.getCartCount();
						},
						fail: () => {},
						complete: () => {}
					});
				} else {
					this.result = "用户未登录";
					uni.showToast({
						icon: "error",
						title: this.result,
					})
				}

			},
			plus() {
				if (this.quantity<this.detail.stock) {
					this.quantity += 1;
				} else{
					uni.showToast({
						icon: "error",
						title:"库存不足",
					})
				}
			},
			sub() {
				if (this.quantity > 1) {
					this.quantity -= 1;
				}
			},
			addOrder() {
				if (uni.getStorageSync("token")) {
					let value = [];
					value.push(this.detail);
					value[0].quantity = this.quantity;
					uni.request({
						url: 'http://localhost:8080/order/addOrder',
						method: 'POST',
						header: {
							'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
						},
						data: {
							token: this.token,
							totalPrice: this.detail.price*this.quantity,
							cartListJson: JSON.stringify(value),
						},
						success: res => {
							if (res.data != "库存不足") {
								this.toOrder(res.data);
							} else if (res.data == "库存不足") {
								uni.showToast({
									icon: "error",
									title: res.data,
								})
							}
						},
						fail: () => {},
						complete: () => {}
					});
				} else {
					this.result = "用户未登录";
					uni.showToast({
						icon: "error",
						title: this.result,
					})
				}
			},
			toOrder(orderId) {
				uni.navigateTo({
					url: '/pages/order/order?orderId=' + orderId,
				});
			},
			numsInput() {
				uni.showModal({
					title: '数量',
					editable: true,
					placeholderText: this.quantity.toString(),
					success: res => {
						if (res.confirm) {
							if (res.content == Number(res.content) && Number(res.content) > 0&&Number(res.content)<this.detail.stock) {
								this.quantity = Number(res.content);
							}else if(Number(res.content)>this.detail.stock){
								uni.showToast({
									icon: "error",
									title:"库存不足",
								})
							}
							 else {
								uni.showToast({
									icon: 'error',
									title: '输入类型错误'
								})
							}
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.navBar {
		display: flex;
		height: 100rpx;
		background-color: white;
		align-items: center;
		padding: 0 30rpx;
		/* #ifdef MP-WEIXIN */
		padding-top: 100rpx;
		/* #endif */

		.left {
			flex: 1;
		}

		.center {
			flex: 1;
			color: #646566;
			text-align: center;
			font-size: 34rpx;
			font-weight: 700;
		}

		.right {
			flex: 1;
		}
	}

	.goodsImg {
		width: 100%;
	}

	.goodsDetail {
		position: relative;
		top: -100rpx;
		background-color: white;
		margin: 20rpx;
		border-radius: 25rpx 25rpx 0 0;
		overflow: hidden;
		z-index: 1;

		.price {
			padding: 20rpx;
			color: red;
			font-size: 64rpx;
			font-weight: 700;
			background: linear-gradient(to top, #129ce1, #15b1ff);

			.yuan,
			.decimal {
				font-size: 48rpx;
			}
		}

		.name-spec-desc {
			border-radius: 25rpx 25rpx 0 0;
			margin-top: -20rpx;
			padding: 30rpx;
			color: #646566;
			background-color: white;

			.goodsName {
				font-size: 42rpx;
				margin-bottom: 20rpx;
			}

			.specifications {
				padding: 20rpx 0;
			}

			.description {
				padding: 20rpx 0;
			}

		}

		.label-numsBox {
			display: flex;
			padding: 40rpx 0;
			border-top: 2rpx solid #ccc;
			border-bottom: 2rpx solid #ccc;

			.label {
				flex: 3;
			}

			.numsBox {
				flex: 2;
				display: flex;
				align-items: center;
			}

			.btn {
				width: 50rpx;
				height: 50rpx;
				background-color: #15b1ff;
				font-size: 50rpx;
				line-height: 46rpx;
				text-align: center;
				color: white;
				border-radius: 50%;
			}

			.num {
				padding: 0 20rpx;
			}
		}
	}

	.goods-nav {
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 2;
	}
</style>